<template>
  <div class="BottomView">
    <div class="view">
      <el-card shadow="hover">
        <!-- template -->
        <template v-slot:header>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template>
          <div class="charts-wrapper">
            <div class="charts-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数据</div>
                <div class="chart-data">93.125</div>
                <v-echarts :options="searchUserOption"> </v-echarts>
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <div class="chart-data">93.125</div>
                <!-- <v-echarts :options="searchNumberOption"> </v-echarts> -->
                <v-echarts :options="searchUserOption"> </v-echarts>
              </div>
            </div>
            <div class="table-wrapper">
              <el-table :data="tableData">
                <el-table-column prop="rank" align="center" label="排名" />
                <el-table-column prop="keyword" label="关键词" align="center" />
                <el-table-column prop="count" label="总搜索量" align="center" />
                <el-table-column
                  prop="users"
                  label="搜索用户数"
                  align="center"
                />
                <el-table-column
                  prop="range"
                  label="用户数点击量"
                  align="center"
                />
              </el-table>
              <el-pagination
                layout="prev,pager,next"
                :total="100"
                :page-size="4"
                background
                @current-change="onPage"
              ></el-pagination>
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radioSelect" size="small">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <template>
          <!-- 饼图 -->
          <div class="charts-wrapper">
            <v-echarts :options="categoryOptions" />
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchUserOption: {
        xAxis: {
          type: "category",
          boundaryGap: false, //两头顶边显示 边界的缝隙
        },
        yAxis: {
          show: false,
          // 自定义y轴坐标系范围
          min: 0,
          max: 300,
        },
        // series系列 整体数据内部样式
        series: [
          {
            // 折线图
            type: "line",
            data: [100, 150, 200, 250, 200, 150, 100, 50, 100, 150],
            // 显示面积
            areaStyle: {
              color: " rgba(95, 187, 255, 0.5)",
            },
            lineStyle: {
              //折线图线条颜色
              color: "rgba(95,187,255)",
            },
            itemStyle: {
              //项目图的样式
              //数据标记圆点透明度
              opacity: 0,
            },
            smooth: true, //折线变平滑
          },
        ],
        grid: {
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
        },
      },
      searchNumberOption: {},
      tableData: [
        { id: 1, rank: 1, keyword: "北京", count: 100, users: 90, range: 90 },
        { id: 2, rank: 2, keyword: "北京", count: 100, users: 90, range: 90 },
        { id: 3, rank: 3, keyword: "北京", count: 100, users: 90, range: 90 },
        { id: 4, rank: 4, keyword: "北京", count: 100, users: 90, range: 90 },
        { id: 5, rank: 5, keyword: "北京", count: 100, users: 90, range: 90 },
        { id: 6, rank: 6, keyword: "北京", count: 100, users: 90, range: 90 },
      ],
      radioSelect: "品类",
      categoryOptions: {},
    };
  },
  mounted() {
    this.renderPieChart();
  },
  methods: {
    // 分页监听点击的第几页
    onPage(v) {
      // console.log(v);
    },
    // 饼状图方法
    renderPieChart() {
      const mockData = [
        {
          legendnname: "粉面粥店",
          value: 54,
          percent: "15.40%",
          itemStyle: {
            color: "#e7e702",
          },
          name: "粉面粥店 | 15.40% ",
        },
        {
          legendnname: "简餐便当",
          value: 97,
          percent: "22.30%",
          itemStyle: {
            color: "#8d7fec",
          },
          name: "简餐便当 | 22.30% ",
        },
        {
          legendnname: "汉堡披萨",
          value: 92,
          percent: "21.40%",
          itemStyle: {
            color: "#5085f2",
          },
          name: "汉堡披萨 | 21.40%",
        },
      ];
      this.categoryOptions = {
        title: [
          {
            text: "品类分布",
            textStyle: {
              fontSize: 14,
              color: "#666",
            },
            left: 20,
            top: 20,
          },
          {
            text: "累计订单量", //标题
            subtext: "320", // 副标题
            // 坐标的移动
            x: "34.5%",
            y: "42.5%",
            // title样式
            textStyle: {
              fontSize: 14,
              color: "#999",
            },
            // 副标题样式
            subtextStyle: {
              fontSize: 28,
              color: "#333",
            },
            textAlign: "center", //标题对其的方式
          },
        ],
        series: [
          {
            name: "品类分布", //tooltip 进行区分
            // 饼状态
            type: "pie",
            data: mockData,
            // label显示数据 以及显示的位置
            label: {
              normal: {
                show: true,
                position: "outter", //决定label显示的位置   inner ---显示再内部
                formatter: function (params) {
                  // console.log(params);
                  return params.data.legendnname;
                },
              },
            },
            center: ["35%", "50%"], //饼状图的位置
            radius: ["45%", "60%"], //饼状图半径
            labelLine: {
              //控制线段的样式
              normal: {
                length: 5, //线段长度
                length2: 3,
                smmoth: true, //线段平滑
              },
            },
            clockwise: false, //label 顺时针方向 true 顺时针  false 逆时针 展示
            itemStyle: {
              // 每个数据之间的间隔
              borderWidth: 4,
              borderColor: "#fff",
            },
          },
        ],
        // 图例说明
        legend: {
          type: "scroll",
          // 确定方向
          orient: "vertical", //垂直方向
          height: 250,
          left: "70%",
          top: "middle", //居中显示
          textStyle: {
            color: "#8c8c8c",
          },
        },
        // 提示消息|| 鼠标移动到图例显示数据
        tooltip: {
          trigger: "item", //默认item  --鼠标移动到item会触发
          // 对展示信息进行定制
          formatter: function (params) {
            // console.log("params", params);
            //  params.marker 圆点
            let str =
              params.seriesName +
              "<br/>" +
              params.marker +
              params.data.legendnname +
              "<br/>" +
              "数量 : " +
              params.data.value +
              "<br/>" +
              "占比 : " +
              params.data.percent;
            return str;
          },
        },
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.BottomView {
  display: flex;
  margin-top: 20px;
  .view {
    flex: 1;
    width: 50%;
    box-sizing: border-box;
    &:first-child {
      padding: 0 10px 0 0;
    }
    &:last-child {
      padding: 0 0 0 10px;
    }
    .title-wrapper {
      display: flex;
      height: 60px;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 500;
      padding: 0 20px 0 20px;
      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }
    .charts-wrapper {
      display: flex;
      flex-direction: column;
      height: 522px;
      .charts-inner {
        display: flex;
        padding: 0 10px;
        margin-top: 20px;
        .chart {
          flex: 1;
          padding: 0 10px;
          .chart-title {
            color: #999;
            font-size: 14px;
          }
          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }
          .echarts {
            height: 50px;
          }
        }
      }
      .table-wrapper {
        flex: 1;
        margin-top: 20px;
        padding: 0 20px 20px;
        .el-pagination {
          display: flex;
          justify-content: flex-end;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
 